<script>
import { uploadImage } from "@/api/form";
export default {
  props: ["node"],
  data() {
    return {
      url:null
    };
  },
  created() {
    this.url = process.env.VUE_APP_BASE_API + "/image";
  },
  render() {
    !this.node.answer ? this.$set(this.node, "answer", []) : null;
    !this.node.upload_num_max
      ? this.$set(this.node, "upload_num_max", 2)
      : null;
    return (
      <el-upload
        class={[
          "upload",
          this.node.answer.length == this.node.upload_num_max ? "hide" : "",
        ]}
        accept=".jpg,.png,.jpeg"
        action={this.url}
        file-list={this.node.answer}
        limit={this.node.upload_num_max}
        multiple
        list-type="picture-card"
        {...{
          props: {
            "on-remove": (file, list) => {
              this.node.answer = list;
            },
            "on-exceed": (file, list) => {
              this.$message.warning("超出上传限制个数");
            },
            "http-request": (params) => {
              let spark = new SparkMD5.ArrayBuffer();
              let fileReader = new FileReader();
              let file = params.file;
              fileReader.readAsArrayBuffer(file.slice(0, file.size));
              fileReader.onload = (e) => {
                spark.append(e.target.result);
                let md5 = spark.end();
                let form = new FormData();
                form.set("file", file);
                form.set("md5", md5);
                uploadImage(form).then((e) => {
                  let o = {
                    id: e.id,
                    url: e.file,
                  };
                  this.node.answer.push(o);
                });
              };
            },
          },
        }}
      >
        <i class="el-icon-plus"></i>
      </el-upload>
    );
  },
};
</script>

<style scoped>
.upload >>> .el-upload-list__item {
  transition: none;
}

.hide >>> .el-upload {
  display: none;
}
</style>
